<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<!-- <image src="/static/images/search.png" mode="widthFix" class="fr"></image> -->
		<view class="hei_100"></view>
		 <!-- #endif -->
		<mescroll-body top="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<view class="cards" v-for="(item, index) in table" :key="index" :class="xiabiao==index?'border2':'border1'">
				<view class="card" @click="select(index, item)">
					<image class="image" :src="item.portrait"></image>
					<view class="body">
						<view class="body1">{{item.name}}<staff-state :status="item.statusId"></staff-state></view>
						<view class="body2">
							<view class="score fl"><uni-rate active-color="#FCC800" max="5" is-fill="false" size="18" disabled="true" :value="item.score"></uni-rate></view>
							<view class="fr" @click.stop="toPlan(item.id)">查看工作安排 〉</view>
						</view>
						<view class="body3">接单时间 {{item.startTime}}-{{item.endTime}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view style="width: 100%;height: 140rpx;"></view>
		<view class="details-bottom">
			<view>
				<button :disabled="xiabiao<0" class="but-error" @click="add()">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import UniRate from '@/components/uni-rate/uni-rate.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import StaffState from '@/components/button/StaffState.vue'
import {
	mapState,
	mapMutations
} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader,
			UniRate,
			MescrollBody,
			StaffState
		},
		data() {
			return {
				xiabiao: -1, // 选中的用户的下标
				title: '确认订单',
				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					textNoMore: '无更多数据'
				},
				upOption: {
					auto: false,
					page: {
					  num : 0 ,
					  size : 20 ,
					  time : null
					},
					noMoreSize: '5',
					textNoMore: '无更多数据'
				},
				detail:{
					enterpriseId: '',
					name: '',
					id: '',
					userId: '',
				},
				page: 1,
				pages: 1,
				size: 9999,
				table: [],
				employeeId: '',
				userName: '',
			}
		},
		mounted() {
			let _this = this
			uni.getStorage({
			    key: 'orderMeal',
			    success: function (res) {
					for (let i in _this.detail) {
						_this.detail[i] = res.data[i]
					}
					_this.id = res.data.id||res.data.enterpriseId
					setTimeout(function() {
						_this.mescroll.resetUpScroll()
					}, 10);
			    }
			});
		},
		methods: {
			toPlan(id) {
				uni.navigateTo({
				    url: '/pageageA/pages/order/plan?id=' + id
				});
			},
			add() {
				let _this = this
				uni.getStorage({
				    key: 'orderMeal',
				    success: function (res) {
						let query = res.data
						query.id = _this.employeeId
						query.name = _this.userName
						console.log(query)
						uni.setStorage({ //将订单信息保存在本地
							key: 'orderMeal',
							data: query
						})
						_this.back()
				    }
				});
			},
			back() {
				this.$Router.back();
			},
			select(index, item) {
				this.xiabiao = index
				this.employeeId = item.id
				this.userName = item.name
			},
			//下拉刷新的回调
			downCallback() {
			var _this = this;
			_this.table = []
			_this.mescroll.resetUpScroll()
			// 	_this.$http.post('/emp/info/query', {
			// 		userId: '',
			// 		enterpriseId: _this.detail.enterpriseId,
			// 		page: _this.page,
			// 		size: _this.size,
			// 		status: ''
			// 	})
			// 	.then(function(response) {
			// 		_this.pages = response.data.pages
			// 		//联网成功的回调,隐藏下拉刷新的状态
			// 		_this.table = response.data.list;
			// 		_this.mescroll.success();
			// 	})
			// 	.catch(function(error) {
			// 		console.log(error);
			// 		_this.mescroll.endErr();
			// 	});
			},
			//上拉加载的回调
			upCallback(page) {
				console.log('detail',this.detail)
				var _this = this
				_this.$http.post('/emp/info/query', {
					userId: _this.detail.userId,
					enterpriseId: _this.detail.enterpriseId,
					page: page.num,
					size: page.size,
					status: ''
				})
				.then(function(response) {
					_this.table = _this.table.concat(response.data.list);
					_this.mescroll.endSuccess(response.data.list.length, response.data.total)
				})
				.catch(function(error) {
					console.log(error);
					_this.mescroll.endErr();
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
page{
	font-size:32rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(51,51,51,1);
	background-color: #F9FAFB;
}
.cards{
	width: 686rpx;
	min-height: 188rpx;
	margin-top: 20rpx;
	margin-left: 32rpx;
	background:rgba(255,255,255,1);
	border-radius:10rpx;
}
.border1{
	border:1rpx solid rgba(235,236,237,1);
}
.border2{
	border:4rpx solid rgba(87,191,255,1)
}
.card{
	padding: 20rpx 16rpx 20rpx 20rpx;
}
.image{
	float: left;
	width: 123rpx;
	height: 148rpx;
	border-radius:10rpx;
	border:1rpx solid rgba(235,236,237,1);
}
.score{
	width: 200rpx;
	min-height: 20rpx;
	margin-top: 20rpx;
}
.body{
	float: left;
	width: 506rpx;
	margin-left: 16rpx;
}
.body1{
	width: 100%;
	height:45rpx;
	font-size:32rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(102,102,102,1);
	line-height:45rpx;
}
.body2{
	width: 100%;
	height:60rpx;
	font-size:28rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(153,153,153,1);
}
.body3{
	width: 100%;
	font-size:26rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(153,153,153,1);
	line-height:37rpx;
}
.details-bottom {
	width: 100%;
	/* margin-top: 100rpx; */
	/* padding-bottom: 22rpx; */
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
}
.but-error {
	width: 100%;
	/* margin-left: 4.3%; */
	height: 100rpx;
	background:rgba(87,191,255,1);
	border-radius:0rpx;
	font-size:36rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
